<template>
  <div id="app">
    <div class="on">
      <section class="loginContainer">
        <div class="loginInner">
          <div class="login_header">
            <h2 class="login_logo">渴了么</h2>
            <div class="login_header_title">
              <a href="javascript:;" :class="{on:isshow}"  @click="change(true)">短信登录</a>
              <a href="javascript:;"  :class="{on:!isshow}" @click="change(false)" >密码登录</a>
            </div>
          </div>
          <div class="login_content">
            <form>
              <!--短信登陆-->
              <div  :class="{on:isshow}">
                <section class="login_message">
                  <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
                  <button class="get_verification" v-show="!computeTime" @click.prevent="getCode">
                    <span >获取验证码</span>
                  </button>
                  <button class="get_verification"  v-show="computeTime">
                    <span>{{computeTime}}s</span>
                  </button>

                </section>
                <section class="login_verification">
                  <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
                </section>
                <section class="login_hint">
                  温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意
                  <a href="javascript:;">《用户服务协议》</a>
                </section>
              </div>
              <!--号码登陆-->
              <div :class="{on:!isshow}">
                <section>
                  <section class="login_message">
                    <input type="tel" maxlength="11" placeholder="手机/邮箱/用户名" v-model="name">
                  </section>
                  <section class="login_verification">
                    <input type="text" maxlength="8" placeholder="密码" v-if="showPassword" v-model="pwd">
                    <input type="password" maxlength="8" placeholder="密码" v-if="!showPassword" v-model="pwd">
                    <div class="switch_button" :class="showPassword?'on':'off'" @click="switchShowPassword">
                      <div class="switch_circle" :class="{on: showPassword}"></div>
                      <span class="switch_text" v-show="showPassword">no</span>
                    </div>
                  </section>
                  <section class="login_message">
                    <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
                    <img class="get_verification" :src="base" alt="captcha" @click="yzm">
                  </section>
                </section>
              </div>
              <button class="login_submit" @click="login">登录</button>
            </form>
            <a href="javascript:;" class="about_us">关于我们</a>
          </div>
          <a href="javascript:" class="go_back">
            <i class="iconfont icon-jiantou2"></i>
          </a>
        </div>
        <alert-tip v-if="alertShow" :alertText="alertText" @closeTip="closeTip"/>
      </section>
    </div>
  </div>
</template>

<script>
  import { smsLogin, pwdLogin,sendCode} from '../../api/index'
  import AlertTip from '../../components/Login/AlertTip.vue'
  import ajax from '../../api/ajax'
  export default {
    components: {AlertTip},
    data(){
         return {
            isshow:'',
           name:'',//用户名
           pwd:'',//密码
           captcha:'',//验证码
           phone:'',
           code: '', //短信验证码
           computeTime: 0, //计时时间
           showPassword: false, // 是否显示密码
           alertText: '', // 提示框文本
           alertShow: false, //是否显示提示框
           base:''
         }
     },
    mounted() {
    this.yzm();
    },
    computed:{
      rightPhone () {// 以1开头的11数字
        return /^1\d{10}$/.test(this.phone)
      }
    },
    methods:{
        //短信登陆或者用户名登陆
      change(isshow){
        this.isshow = isshow
      },
      //显示密码
      switchShowPassword () {
        this.showPassword = !this.showPassword
      },
      async getCode () {
        if (this.rightPhone) { // 输入了合法的手机号
          // 开始倒计时
          this.computeTime = 60
          // 启动循环定时器, 每隔1s减少1
          const intervalId = setInterval(() => {
            this.computeTime--
            //如果到时, 停止计时
            if (this.computeTime === 0) {
              clearInterval(intervalId)
            }
          }, 1000)
          // 发ajax请求, 向手机号发验证码的三种方式
          // const s = await ajax('/api/sendcode', this.phone)
//          var res = await this.$axios.get('/api/sendcode?phone=16630339517')
          const result = await sendCode(this.phone)

          if (result.code === 1) {
            clearInterval(intervalId)
            // 显示提示框
            this.alertShow = true
            this.alertText = result.msg
          }
        }else{
          this.alertShow = true
          this.alertText ="手机号为空，或者手机号格式不正确"
        }

      },
      async login(){
        let result
        if(this.isshow){
            //短信
          const { phone, code}=this
          if(!phone){
            this.alertText="请输入电话号";
            this.alertShow=true;
            return false
          }else if(!code){
            this.alertText="请输入短信验证码";
            this.alertShow=true;
            return false
          }
          const result = await smsLogin(phone,code)
          if(result.code==0){
            // 回退
            this.$router.back()
            const msg = result.data
            //存数据
            this.$store.commit('login',msg)
            //读数据
            console.log( this.$store.getters.login)

          }else{
            this.alertShow = true
            this.alertText = result.msg
          }
        }else {
          const {name, pwd, captcha} = this
          if(!name){
            this.alertText="请输入用户名";
            this.alertShow=true;
            return false
          }else if(!pwd) {
            this.alertShow = true
            this.alertText = '请输入密码'
            return false
          } else if(!captcha) { // 图片验证码
            this.alertShow = true
            this.alertText = '请输入验证码'
            return
          }

          var data = await this.$axios.post('http://cangdu.org:8001/v2/login',{username:name,password:pwd,captcha_code:captcha})
          if(data.data.status==0){
            this.$router.back();
          }
        }






      },
      // 关闭提示框
      closeTip () {
        this.alertShow = false
      },
      //验证码
      async yzm(){
        var msg = await  this.$axios.post('http://cangdu.org:8001/v1/captchas')
        this.base = msg.data.code
      }


    }

  }
</script>
<style>
  a{
    color: #7e8c8d;
    text-decoration: none;
  }
  #app >.on {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
  }
  #app >.on .loginContainer {
    width: 100%;
    height: 100%;
    background: #fff;
  }
  #app >.on .loginContainer .loginInner {
    padding-top: 60px;
    width: 80%;
    margin: 0 auto;
  }
  #app >.on .loginContainer .loginInner .login_header .login_logo {
    font-size: 40px;
    font-weight: bold;
    color: #02a774;
    text-align: center;
  }
  #app >.on .loginContainer .loginInner .login_header .login_header_title {
    padding-top: 40px;
    text-align: center;
  }
  #app >.on .loginContainer .loginInner .login_header .login_header_title >a {
    color: #333;
    font-size: 14px;
    padding-bottom: 4px;
  }
  #app >.on .loginContainer .loginInner .login_header .login_header_title >a:first-child {
    margin-right: 40px;
  }
  #app >.on .loginContainer .loginInner .login_header .login_header_title >a.on {
    color: #02a774;
    font-weight: 700;
    border-bottom: 2px solid #02a774;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div {
    display: none;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div.on {
    display: block;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div input {
    width: 100%;
    height: 100%;
    padding-left: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: 0;
    font: 400 14px Arial;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div input:focus {
    border: 1px solid #02a774;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_message {
    position: relative;
    margin-top: 16px;
    height: 48px;
    font-size: 14px;
    background: #fff;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_message .get_verification {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: 0;
    color: #ccc;
    font-size: 14px;
    background: transparent;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification {
    position: relative;
    margin-top: 16px;
    height: 48px;
    font-size: 14px;
    background: #fff;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification .switch_button {
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: background-color 0.3s, border-color 0.3s;
    padding: 0 6px;
    width: 30px;
    height: 16px;
    line-height: 16px;
    color: #fff;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification .switch_button.off {
    background: #fff;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification .switch_button.off .switch_text {
    float: right;
    color: #ddd;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification .switch_button.on {
    background: #02a774;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_verification .switch_button >.switch_circle {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 16px;
    height: 16px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
    transition: transform 0.3s;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_hint {
    margin-top: 12px;
    color: #999;
    font-size: 14px;
    line-height: 20px;
  }
  #app >.on .loginContainer .loginInner .login_content >form >div .login_hint >a {
    color: #02a774;
  }
  #app >.on .loginContainer .loginInner .login_content >form .login_submit {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 30px;
    border-radius: 4px;
    background: #4cd96f;
    color: #fff;
    text-align: center;
    font-size: 16px;
    line-height: 42px;
    border: 0;
  }
  #app >.on .loginContainer .loginInner .login_content .about_us {
    display: block;
    font-size: 12px;
    margin-top: 20px;
    text-align: center;
    color: #999;
  }
  #app >.on .loginContainer .loginInner .go_back {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 30px;
    height: 30px;
  }
  #app >.on .loginContainer .loginInner .go_back >.iconfont {
    font-size: 20px;
    color: #999;
  }
</style>

